<template>
  <div class="admin-header" :class="{'show-tags': tagsView, 'fixed-header': fixedHeader, 'sidebar-collapse': isCollapse}">
    <!-- 顶部操作 -->
    <navbar />

    <!-- tag标签 -->
    <tag-views />

  </div>
</template>

<script>
  import Navbar from './navbar/index.vue'
  import TagViews from './tag-views/index.vue'
  export default {
    name: "admin-header",
    components: {
      Navbar,
      TagViews
    },
    data() {
      return {

      }
    },
    computed: {
      // 是否折叠左侧菜单栏
      isCollapse: {
        get() {
          return this.$store.state.settings.isCollapse
        },
        set(val) {
          this.$store.dispatch('settings/changeSetting', {
            key: 'isCollapse',
            value: val
          })
        }
      },
      // 是否显示菜单标签
      tagsView() {
        return this.$store.state.settings.tagsView
      },
      // 是否固定顶部菜单
      fixedHeader() {
        return this.$store.state.settings.fixedHeader
      },
    },
    methods: {

    }
  }
</script>

<style>
.admin-header {
  transition: width .28s;
  height: 50px;
  background: #fff;
}
.admin-header.show-tags {
  height: 90px;
}
.admin-header.fixed-header {
  position: fixed;
  top: 0;
  z-index: 9;
  width: calc(100% - 210px);
}
.admin-header.fixed-header.sidebar-collapse {
  width: calc(100% - 54px);
}
</style>

<style scoped>

/deep/ .el-header {
  padding: 0;
}
/deep/ .el-popper {
  text-align: center;
}
/deep/ .el-dropdown-menu__item {
  text-align: center;
}
</style>
